import React, { useEffect, useState } from 'react'
import { useLocation, useParams } from 'react-router-dom'
import { ListItemType } from '../home'
import { Space, Tag } from 'react-vant'
import axios from 'axios'
const Index = () => {
	// 方式一： 不建议
	// const location = useLocation()
	// const v = location.state as ListItemType

	// 方式二
	const [v, setV] = useState<ListItemType | null>(null)
	const { id } = useParams()
	const fetchV = async () => {
		const resp = await axios.get('/api/list/' + id);
		setV(resp.data.data)
	}

	useEffect(() => {
		fetchV()
	}, [])

	if (!v) {
		return <div>数据加载中...</div>
	}

	return (
		<div>
			<div key={v.id} className="list-item">
				<div className='between'>
					<h3>{v.title}</h3>
					<span>{v.minPrice}-{v.maxPrice}K</span>
				</div>
				<div>
					<Space>
						{v.require.map((v, i) => {
							return <Tag key={i}>{v.name}</Tag>
						})}
					</Space>
				</div>
				<div className='between'>
					<h3>{v.auther}</h3>
					<span>{v.city}</span>
				</div>
			</div>
		</div>
	)
}

export default Index